<template>
  <basic-dialog
    :title="dialogTitle"
    :visible="dialogVisible"
    :handleClose="handleCloseDialog"
  >
    <el-row>
      <slot name="warningMsg"></slot>
      <h4 v-if="warningMsg" style="color: #E6A23C;">{{ warningMsg }}</h4>
    </el-row>
    <el-form
      ref="formData"
      class="input--reason--wrap"
      :model="formData"
      :label-width="labelWidth"
    >
      <slot name="form-header"></slot>
      <el-form-item
        prop="submitReason"
        :label="inputLabel"
        :rules="{ required: isRequired, message: `请输入${this.inputLabel}`, trigger: 'blur' }"
      >
        <el-input
          type="textarea"
          resize="none"
          v-model.trim="formData.submitReason"
          :placeholder="`请输入${inputLabel}`"
          :autosize="autosize"
          :maxlength="inputMaxlength"
          :show-word-limit="isShowWordLimit"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <el-row slot="ft" type="flex" :justify="footerBtnPosition">
      <el-button
        type="primary"
        v-preventReClick
        :loading="submitLoading"
        @click="handleOk">{{ okBtnLabel }}</el-button
      >
      <el-button
        v-preventReClick
        :loading="submitLoading"
        @click="handleCancel"
      >{{ cancelBtnLabel }}</el-button>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
export default {
  components: {
    BasicDialog
  },
  props: {
    visible: { // 弹框显隐开关
      type: Boolean,
      required: true
    },
    submitLoading: { // 确定按钮loading
      type: Boolean,
      default: false
    },
    dialogTitle: { // 弹框标题
      type: String,
      default: '批量操作'
    },
    warningMsg: { // 弹框提示信息
      type: String,
      default: '你确定要批量操作吗？请填写原因'
    },
    inputLabel: { // 原因输入框label
      type: String,
      default: '原因'
    },
    isShowWordLimit: { // 是否展示文本长度限制，默认展示
      type: Boolean,
      default: true
    },
    inputMaxlength: { // 最大文本输入数量
      type: Number,
      default: 100
    },
    autosize: { // textarea尺寸
      type: Object,
      default () {
        return { minRows: 3, maxRows: 4 }
      }
    },
    handleSubmit: { // 确定按钮点击触发方法
      type: Function,
      default: () => {}
    },
    handleNotSubmit: { // 取消按钮点击触发方法
      type: Function
    },
    footerBtnPosition: { // 底部按钮位置，默认居中
      type: String,
      default: 'center'
    },
    okBtnLabel: { // 确定按钮名称
      type: String,
      default: '确定'
    },
    cancelBtnLabel: { // 取消按钮名称
      type: String,
      default: '取消'
    },
    isRequired: { // 原因是否必填，默认必填
      type: Boolean,
      default: true
    },
    labelWidth: { // 表单标签宽度
      type: String,
      default: '80px'
    }
  },
  data () {
    return {
      formData: {
        submitReason: '', // 提交原因
      },
      dialogVisible: false,
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
    }
  },
  methods: {
    // 提交
    handleOk () {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.$emit('getSubmitReason', this.formData.submitReason);
          this.handleSubmit(this.formData.submitReason);
        }
      });
    },
    // 取消
    handleCancel () {
      if (this.handleNotSubmit) {
        this.handleNotSubmit(this.formData.submitReason);
      } else {
        this.handleCloseDialog();
      }
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    // 清空状态
    clearAllState () {
      this.formData.submitReason = '';
      this.$emit('update:visible', false);
    },
  }
}
</script>
<style lang="less" scoped>
.input--reason--wrap {
  margin-top: 10px;
}
</style>
